<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: lz
 * @LastEditTime: 2022-01-07 22:53:49
-->
<template>
  <div ref="right2_container" style="height: 95%"></div>
</template>
<script>
import { DualAxes } from '@antv/g2plot';
import {get} from '../../../utils/request'
import moment from 'moment'
export default {
  data(){
    return{
      dataArr:[]
     }
  },
  mounted(){
   this.initData()
  },
  methods:{
    initData(){
       get('/dashboard/pageQueryTodayData',{
        page:1,
        pageSize:5,
        device_id:1
      }).then(res=>{
        res.data.list.forEach(item => {
          item.dataTime = moment(item.insert_time).format('HH:mm')
        });
        this.dataArr=res.data.list;
        console.log(5555,res)
        this.initChart();
      })
    },
    initChart(){
      const dualAxes = new DualAxes(this.$refs.right2_container,{
          data: [this.dataArr, this.dataArr],
          xField: 'dataTime',
          yField: ['pm10', 'pm25'],
          geometryOptions: [
    {
      geometry: 'line',
      color: '#5B8FF9',
    },
    {
      geometry: 'line',
      color: '#5AD8A6',
    },
  ],
      });

      dualAxes.render();
    }

  }
}
</script>
<style scoped>

</style>